<template>
  <div>
    <h3>电流趋势图</h3>
    <x-button type="primary" @click.native="back">返回</x-button>
    <group>
      <calendar v-model="date" title="日期：" @on-change="dateChange" style="font-size:18px;"></calendar>
      <card>
        <div slot="content" class="card-flex card-content">
          <div class="vux-1px-r">
            归属地
            <br />
            <span>{{data.location}}</span>
          </div>
          <div class="vux-1px-r">
            台区号
            <br />
            <span>{{data.areaNo}}</span>
          </div>
          <div>
            日期
            <br />
            <span>{{date}}</span>
          </div>
        </div>
      </card>
    </group>
    <group>
      <div v-if="chartData.length == 0" style="margin: 10px 20px;">暂无数据</div>
      <div id="myChart" :style="{width: '100%', height: '300px'} "></div>
    </group>
    <loading :show="showLoading" text="加载中..."></loading>
  </div>
</template>

<script>
import { Group, XButton, Calendar, Card, Loading } from "vux";
import Http from "./../unit/http.js";

// 引入 echarts 主模块。
import echarts from 'echarts/lib/echarts';
// 引入折线图。
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legendScroll';


export default {
  components: {
    Group,
    XButton,
    Calendar,
    Card, Loading
  },
  data() {
    return {
      showLoading:false,
      id: 0,
      date: "TODAY",
      data: {},
      chartData: [],
      xAxisData: []
    };
  },
  mounted() {
    this.getId();
    this.getData(this.id);
    this.getChartData(this.id);
    this.getxAxisDate();
  },
  watch:{
    chartData:function(){
      this.showLoading = false
    }
  },
  methods: {
    getId() {
      this.id = this.$route.query.id;
    },

    getData(id) {
      const self = this;
      const param = { id: id };
      const url = "/yitai/admin/areaInfo";
      const success = function(response) {
        
        self.data = response.data.info;
      };
      const failed = function() {
        
      };
      Http.http(url, param, success, failed);
    },

    getChartData(id) {
      this.showLoading = true;
      const self = this;
      const param = { areaId: id, date: self.date };
      const url = "/yitai/admin/areaStatistic";
      const success = function(response) {
        
        self.chartData = response.data.info;
        self.setChart();
      };
      const failed = function() {
       
      };
      Http.http(url, param, success, failed);
    },

    // 基于准备好的dom，初始化echarts实例
    setChart() {
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      let option = {
        backgroundColor: '#2c343c',
        
        tooltip: {
          trigger: "axis",
          // axisPointer: {
          //   type: "cross",
          //   lable:{
          //     color:"#000"
          //   },
          //   backgroundColor:"#000",
            
          // },

          textStyle:{
            color: '#fff'
          }
        },
        legend: {
          left: "center",
          data: ["Ia", "Ib", "Ic", "In"],
          textStyle:{
            color: '#fff'
          }
      
        },
        grid: {
          left: "8%",
          right: "3%",
          bottom: "15%",
          top: "15%",
          containLabel: false,
          borderColor:'#fff'
          
        },
        xAxis: {
          type: "category",
          name: "时间",
          nameLocation: "middle",
          nameGap: 30,
          boundaryGap: false,
          data: this.xAxisData,
          nameTextStyle:{
            color: '#fff'
          },
          axisLine:{
			      lineStyle:{
			          color:'#fff',
			      }
			    },
        },
        yAxis: {
          type: "value",
          name: "单位/A",
          axisLabel: {
            rotate: 45 //倾斜度 -90 至 90 默认为0
          },
          nameTextStyle:{
            color: '#fff'
          },
          axisLine:{
			      lineStyle:{
			          color:'#fff',
			      }
			    },
        },
        series: this.chartData,
        color:['#FFFF00','#00FF00', '#FF0000', '#0000FF']
      };

      myChart.setOption(option);
    },

    getxAxisDate() {
      const min = 24 * 60;
      const array = [];
      const number = min / 15;
      let moment = 0;
      for (let i = 0; i < number; i++) {
        moment = 15 * i;
        const hour = parseInt(moment / 60);
        if (hour < 10) {
          hour = "0" + hour;
        }
        const minute = moment % 60;
        if (minute < 10) {
          minute = minute + "0";
        }
        const time = hour + ":" + minute;
        array.push(time);
      }
      array.push(array.shift());
      this.xAxisData = array;
    },

    dateChange() {
      this.getChartData(this.id);
    },

    back() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped >
h3 {
  margin-bottom: 20px;
}
button.weui-btn {
  font-size: 18px;
}
.weui-btn_primary {
  background-color: #005e9c;
}
.weui-btn_primary:not(.weui-btn_disabled):active {
  color: rgba(255, 255, 255, 0.6);
  background-color: #034b7a;
}
.weui-btn_disabled.weui-btn_primary {
  background-color: #3978a1;
}

.card-flex {
  display: flex;
}
.card-content {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-flex > div {
  flex: 1;
  text-align: center;
  font-size: 18px;
}
.card-flex span {
  color: #005e9c;
}
.vux-1px-r:after {
  border-right: 1px solid #005e9c !important;
}
</style>